import React from "react";
import Chart from "echarts-for-react";
import style from "./EnvHisEcharts.less";



class EnvHisEcharts extends React.Component {

    setOption  = () => {
       return {
        tooltip: {
            trigger: 'axis',
            formatter: function(params, ticket, callback) {
    
                var res = params[0].name;
    
                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesType === 'line') {
                        res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                    } else {
                        res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                    }
                }
                return res;
    
            }
        },
        grid: {
            containLabel: true
        },
        legend: {
            data: [this.props.checkText[0],this.props.checkText[1],this.props.checkText[2],this.props.checkText[3],this.props.checkText[4],this.props.checkText[5],this.props.checkText[6]]
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: this.props.data?this.props.data.xAxis:[]
        }],
        dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }
        // , {
        //     type: 'slider',
        //     yAxisIndex: 0,
        //     filterMode: 'empty',
        //     start: 0,
        //     end: 100
        // }
        , {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }, {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100
        }],
        yAxis: [{
            type: 'value',
            name: 'mg/m³',
          
            position: 'left',
            axisLabel: {
                formatter: '{value} '
            },
            max: function(value) {
                return parseInt(value.max * 1.5)
            }
        }, {
            type: 'value',
            name: 'mg/L',
          
            position: 'right',
            axisLabel: {
                formatter: '{value} '
            },
            max: function(value) {
                return  parseInt(value.max * 1.5)
            }
        }, {
            type: 'value',
            name: 'mg/m³',
           
            position: 'right',
            offset : 80,
            axisLabel: {
                formatter: '{value} '
            },
            max: function(value) {
                return parseInt(value.max * 1.5)
            }
        }],
        series: [{
            name:  this.props.checkText[0],
            type: 'line',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            data: this.props.data.series?this.props.data.series[0]:[]
        }, {
            name:  this.props.checkText[1],
            type: 'line',
            yAxisIndex: 1,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: this.props.data.series?this.props.data.series[1]:[]
        }, {
            name: this.props.checkText[2],
            type: 'line',
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: this.props.data.series?this.props.data.series[2]:[]
        },
        , {
            name: this.props.checkText[3],
            type: 'line',
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data:this.props.data.series?this.props.data.series[3]:[]
        }
        , {
            name: this.props.checkText[4],
            type: 'line',
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data:this.props.data.series?this.props.data.series[4]:[]
        }
        , {
            name: this.props.checkText[5],
            type: 'line',
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data:this.props.data.series?this.props.data.series[5]:[]
        }]
    };

        

    }

    render() {
        console.log(this.props)
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}
                
                 />
          

         
           
          );
    }
   
}

export default EnvHisEcharts;
